<template>
	<div>
		<el-row :gutter="20">
			<el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3" v-for="(item, index) in Settings" :key="index">
				<el-card>
					<div class="flex-center flex-center-content" :class="item.type">
						<div class="h5-img mb10">
							<el-image style="width: 100%; height: 100%" :src="STATIC_URL + item.src" fit="cover" />
						</div>
						<div class="h5-title title mb10">{{ item.name }}</div>
            <div class="mb15">
              <span v-if="item.status == 1" class="success"> 已开启 </span>
              <span v-else class="warning"> 已关闭 </span>
						</div>
						<el-button type="primary" size="default" @click="onOpenSetting(item.type)">立即配置</el-button>
					</div>
				</el-card>
			</el-col>
		</el-row>

		<PlatformDialog ref="PlatformDialogRef"></PlatformDialog>
	</div>
</template>

<script setup lang="ts">
import { defineAsyncComponent, onMounted, ref } from 'vue';
import { SettingApi } from '/@/api/shop/setting';
import { STATIC_URL } from '/@/utils/config';
const PlatformDialog = defineAsyncComponent(() => import('../dialog/platform_setting_dialog.vue'));
const PlatformDialogRef = ref();
let Settings = ref<any[]>([]);

const onOpenSetting = (type: string) => {
	PlatformDialogRef.value.openDialog(type);
};

const onChoice = async () => {
	Settings.value = [];
	const { data } = await SettingApi().all_platform();
	for (let obj of data) {
		Settings.value.push({
			src: obj.src,
			name: obj.name,
			type: obj.type,
			status: obj.status,
		});
	}
	console.log('data: ', data);
};

defineExpose({ onChoice });
</script>

<style scoped lang="scss">
.h5-img {
	width: 66px;
	height: 66px;
}

.title {
	font-weight: 500;
	font-size: 16px;
	line-height: 22px;
	color: #fc800e;
}

.WechatMiniProgram {
	.title {
		color: #6f74e9;
	}
}

.WechatOfficialProgram {
	.title {
		color: #07c160;
	}
}

.App {
	.title {
		color: #806af6;
	}
}

.success {
	color: #67c23a;
}

.warning {
  color: #fc800e;
}
</style>
